<template>
  <view class="box">
    <view class="tou top" :style="'padding-top:' + statusBarHeight1 + 'px'">
      <image class="image1" @click="fanhui" src="https://pic.bangbangtongcheng.com/static/fanhui_bai.png" />个人房源
    </view>
    <!-- #ifdef H5 || APP-PLUS -->
    <scroll-view scroll-y :style="
        'height:calc( 100vh - ' +
        statusBarHeight1 +
        'px - 88rpx)'
      " @scrolltolower="down" @scroll="scrolls" :scroll-into-view="scrollT" refresher-background="#f5f5f5">
      <!-- #endif -->
      <!-- #ifdef MP-WEIXIN-->
      <scroll-view scroll-y :style="
        'height:calc( 100vh - ' +
        statusBarHeight +
        'px - 88rpx)'
      " @scrolltolower="down" @scroll="scrolls" :scroll-into-view="scrollT" refresher-background="#f5f5f5">
        <!-- #endif -->
		<view id="scrollT"> </view>
        <view class="list" :style="width == 290 ? 'padding-bottom:130rpx' : ''">
          <view class="li" v-for="(item, index) in Recommend" :key="index">
            <radio v-if="width == 290" style="top: -47px; margin-right: 10px" :data-index="index" :checked="item.active"
              @click="changeRadio"></radio>
            <view class="xian" :style="'width: ' + (width + 324) + 'rpx'"></view>
            <image mode="aspectFit" class="img1" :src="item.displayDiagram?item.displayDiagram:imgUrl + item.houseImage" @click="details(item.id)" />
            <view class="li_1" @click="details(item.id)" :style="'width: ' + width + 'rpx'">
              <view class="tit">
				<span class="tagLabel">{{item.transactionType ==1?'出租房':(item.newOld ==1?'新房':'二手房')}}</span>
				{{ item.title }}
			  </view>
              <view class="neirong_1">
              	<view class="neir_css">{{ item.region }}</view>
              	<view class="neir_css">{{ item.cellName || ''}}</view>
              </view>
              <view class="neirong_1">
              	<view class="neir_css">{{ item.floor?item.floor.split('|')[0]+"层/共"+item.floor.split('|')[1]+"层" :''}}</view>
              	<view class="neir_css">{{item.houseType || ''}}</view>
              </view>
              <view class="neirong_1">
                <view class="price neir_css" v-if="item.transactionType == 2">{{ item.price }}万</view>
                <view class="price neir_css" v-if="item.transactionType == 1 && item.price <= 10000">{{ item.price }}元</view>
                <view class="price neir_css" v-if="item.transactionType == 1 && item.price > 10000">{{ item.price/10000 }}万元</view>
                <view class="neir_css" style>{{ item.AREA || item.area }}㎡</view>
              </view>
            </view>
          </view>
          <view v-if="Recommend.length == 0" class="none">
            <image src="https://pic.bangbangtongcheng.com/static/none.png" mode="widthFix" />
            <view>没有更多数据了</view>
          </view>
          <view class="down" v-show="Recommend.length != 0 && !downStatus">
            没有更多了
          </view>
        </view>
      </scroll-view>
	  <uniBall></uniBall>
	  <view class="hui" v-if="scrollTops>20" @click="totop">
	  	<image src="https://pic.bangbangtongcheng.com/static/top.png" />返回顶部
	  </view>
  </view>
</template>
<script>
  import {
    mapGetters
  } from "vuex";
  let statusBarHeight;
  //#ifdef H5
  import wxshare from "../utils/index.js";
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
  //#endif
  // #ifdef APP-PLUS
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 10;
  //  #endif
  // #ifdef MP-WEIXIN
  statusBarHeight = uni.getSystemInfoSync().statusBarHeight + 5;
  //  #endif
  export default {
    computed: {
      ...mapGetters(["statusBarHeight1", "userinfo"]),
	  translatePrice:()=>{
	  	return (transaction_type,new_old,price)=>{
			
			console.log(transaction_type)
			console.log(new_old)
	  		if(transaction_type=='1'&&new_old=='1'){//出租房
			
	  			return price>10000?(price/10000)+'万':price+'元'
	  		}else if(transaction_type=='2'){
	  			if(new_old=='1'){//新房
	  				return price+'万'
	  			}else if(new_old=='2'){//  二手房
	  				return price+'万'
	  			}
	  		}else{
	  			
	  		}
	  	}
	  }
    },
    data() {
      return {
        statusBarHeight,
		scrollTop:0,
		scrollTops:0,
        width: 366,
        text: "编辑",
        TabCur: 0,
        zbc: false,
        shouye: false,
        shangjia: false,
        list: [{
            num: 1,
            name: "全部"
          },
          {
            num: 2,
            name: "新房"
          },
          {
            num: 3,
            name: "二手房"
          },
          {
            num: 4,
            name: "出租房"
          },
        ],
        typeIndex1: -1,
        type4: [{
            valueName: "首页",
            id: "1",
          },
          {
            valueName: "房源信息",
            id: "",
          },
        ],
        typeIndex4: -1,
        type6: [{
            valueName: "上架",
            id: "1",
          },
          {
            valueName: "下架",
            id: "0",
          },
        ],
        typeIndex6: -1,
        scrollLeft: 0,
        picker: [],
        pageSize: 10,
        pageNo: 1,
        trigger: false,
        downStatus: true,
        upStatus: true,
        userInfo: uni.getStorageSync("Pduser"),
        imgUrl: this.$imgSrc,
        Recommend: [],
        transactionType: "",
        newOld: "",
        activeData: {},
		scrollT:null,
      };
    },
    onLoad() {
      for (let i = 1; i < 11; i++) {
        this.picker.push(i + "天");
      }
      this.getFy();
      /* #ifdef H5 */
      this.jinzhi();
      /* #endif */
    },
    async onPullDownRefresh() {
      this.Recommend = [];
      this.pageNo = 1;
      //this.downStatus = true;
      // if (this.downStatus) {
        this.trigger = true;
		this.downStatus=true
        await this.getFy();
      // }
    },
    filters: {
      nums(val) {
        return val.toFixed(2);
      },
    },
	
    methods: {
		scrolls(e){
			this.scrollTops = e.detail.scrollTop
			this.scrollT = null
		},
		//回到顶部
		totop() {
			this.$nextTick(()=>{
				this.scrollT = 'scrollT'
			})
		},
      bianji() {
        if (this.text == "编辑") {
          this.text = "完成";
          this.width = 290;
        } else {
          this.text = "编辑";
          this.width = 366;
        }
      },
      tabSelect(e) {
        this.TabCur = e.currentTarget.dataset.id;
        this.scrollLeft = (e.currentTarget.dataset.id - 1) * 60;
        let num = e.currentTarget.dataset.id + 1;
        if (num == 1) {
          this.transactionType = "";
          this.newOld = "";
        } else if (num == 2) {
          this.transactionType = "2";
          this.newOld = "1";
        } else if (num == 3) {
          this.transactionType = "2";
          this.newOld = "2";
        } else if (num == 4) {
          this.transactionType = "1";
          this.newOld = "";
        }
        this.Recommend = [];
        this.pageNo = 1;
        this.upStatus = true;
        this.trigger = false;
        this.getFy();
      },
      changeRadio(e) {
        let that = this;
        let index = e.currentTarget.dataset.index;
        if (that.Recommend[index].active) {
          that.Recommend[index].active = !that.Recommend[index].active;
          that.activeData = {};
        } else {
          that.Recommend.forEach((el, index1) => {
            if (index1 == index) {
              that.Recommend[index1].active = !that.Recommend[index1].active;
              that.activeData = that.Recommend[index1];
            } else {
              that.Recommend[index1].active = false;
            }
          });
        }
      },
      jinzhi() {
        let _this = this;
        let param = window.location.href.split("#")[0];
        uni.request({
          method: "post",
          data: {
            url: param
          },
          header: {
            "content-type": "application/x-www-form-urlencoded",
          },
          url: "https://www.bangbangtongcheng.com/conven//mob/login/getJsTicket.do",
          success(re) {
            _this.jinzhifx(re.data);
          },
        });
      },
      jinzhifx(data) {
        wxshare.config({
          debug: false, //是否打开调试
          appId: data.appId, // 公众号的唯一标识
          timestamp: data.timestamp, // 生成签名的时间戳
          nonceStr: data.nonce, // ，生成签名的随机串
          signature: data.signature, // 签名
          jsApiList: ["hideMenuItems"],
        });
        // 禁止分享
        wxshare.hideMenuItems({
          // 要隐藏的菜单项，只能隐藏“传播类”和“保护类”按钮，所有menu项见附录3
          menuList: [
            "menuItem:share:appMessage",
            "menuItem:share:timeline",
            "menuItem:share:timeline",
            "menuItem:share:qq",
            "menuItem:favorite",
            "menuItem:share:QZone",
            "menuItem:openWithSafari",
          ],
        });
      },
      del() {
        let that = this;
        let data = this.Recommend.filter((el) => {
          return el.active;
        });
        // console.log(data);
        if (!data.length) {
          uni.showToast({
            title: "请选择房源",
            icon: "none",
            mask: true,
          });
          return;
        }
        uni.showModal({
          title: "",
          content: "确定删除此房源？",
          showCancel: true,
          success: (res) => {
            if (res.confirm) {
              that.$myRequest
                .post("/mob/user/delHouseInfo", {
                  id: data[0].id,
                })
                .then((res) => {
                  uni.showToast({
                    title: res.msg,
                    icon: "none",
                    mask: true,
                  });
                  setTimeout(() => {
                    that.reload();
                  }, 1000);
                });
            }
          },
        });
      },
      shangjiaF() {
        this.$myRequest
          .post("/mob/home/updateUpStatus", {
            id: this.activeData.id,
            userId: this.userInfo.id,
            upStatus: this.activeData.up_status == 0 ? "1" : "2",
          })
          .then((res) => {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
            this.guan();
            setTimeout(() => {
              this.reload();
            }, 1000);
          });
      },
      zhiding() {
        this.$myRequest
          .post("/mob/home/updateUpHomePage", {
            id: this.activeData.id,
            dayNum: Number(this.typeIndex1) + 1,
            isShow: this.type4[this.typeIndex4].id,
          })
          .then((res) => {
            uni.showToast({
              title: res.msg,
              icon: "none",
            });
            this.guan();
            setTimeout(() => {
              this.reload();
            }, 1000);
          });
      },
      // /mob/user/getHousesSale
      getFy() {
        let that = this;
        this.upStatus = false;
        this.$myRequest
          .get("/mob/user/getPersonalHouseInfo", {
            pageSize: this.pageSize,
            pageNo: this.pageNo,
          })
          .then((res) => {
			  console.log(this.Recommend.length,'房源')
            if (res.page.list.length < 10 || this.Recommend.length==res.page.count) {
              that.downStatus = false;
            }
            this.upStatus = true;
            this.trigger = false;
            res.page.list.forEach((el) => {
              if (el.houseImage) {
                el.houseImage = el.houseImage.split("|")[0];
              }
            });

            if (this.Recommend.length!=res.page.count) {
            	this.Recommend = this.Recommend.concat(res.page.list);
            }
            uni.stopPullDownRefresh();
            // this.list = res.page.list;
            // this.userInfo = res.userInfo;
            // uni.setStorageSync("Pduser", res.userInfo);
          });
      },
      reload() {
        this.Recommend = [];
        this.pageNo = 1;
        this.upStatus = true;
        this.trigger = false;
        this.getFy();
      },
      down() {
        if (this.downStatus) {
          this.pageNo++;
          this.getFy();
        }
      },
      shangjiaC() {
        this.zbc = true;
        this.shangjia = true;
      },
      async up() {
        this.Recommend = [];
        this.pageNo = 1;
        this.downStatus = true;
        if (this.upStatus) {
          this.trigger = true;
          await this.getFy();
        }
      },
      details(id) {
        uni.navigateTo({
          url: "/pages_houses/housing/used/houseDetails?id=" + id,
        });
      },
      fanhui() {
        uni.navigateBack({
          delta: 1,
        });
      },
      PickerChange(e) {
        // console.log(e);
        if (!this.activeData.id) {
          uni.showToast({
            title: "请选择房源",
            icon: "none",
          });
          return;
        }
        let index = e.detail.value;
        let type = e.currentTarget.dataset.type;
        if (type == 4) {
          this.typeIndex4 = index;
          this.zbc = true;
          this.shouye = true;
        } else if (type == 6) {
          this.typeIndex6 = index;
          if (index == 0) {} else if (index == 1) {}
        } else if (type == 1) {
          this.typeIndex1 = index;
        }
      },
      guan() {
        this.zbc = false;
        this.shouye = false;
        this.shangjia = false;
      },
    },
  };
</script>
<style lang="less" scoped>
  .zbc {
    position: fixed;
    width: 100%;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.3);

    .tan {
      position: absolute;
      width: 600rpx;
      height: 420rpx;
      background-color: #fff;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);
      border-radius: 10rpx;
      overflow: hidden;

      .li_1 {
        margin-left: 32rpx;
        margin-top: 60rpx;
        font-weight: 600;
        font-size: 30rpx;
      }

      .li_2 {
        font-size: 30rpx;
        margin-left: 32rpx;
        margin-top: 30rpx;

        view {
          display: inline-block;
          font-weight: 600;
          font-size: 30rpx;
        }

        .xuan {
          position: relative;
          width: 160rpx;
          height: 60rpx;
          background: #ffffff;
          border: 2rpx solid #64b6a8;
          border-radius: 37rpx;
          line-height: 60rpx;
          color: #64b6a8;
          text-indent: 16rpx;
        }

        .xuan::before {
          position: absolute;
          top: 20rpx;
          right: 30rpx;
          content: "";
          border-color: #fff #fff #64b6a8 #fff;
          border-style: solid;
          border-width: 0rpx 8rpx 14rpx 8rpx;
          height: 0;
          width: 0;
        }
      }

      .li_3 {
        width: 536rpx;
        font-size: 24rpx;
        margin-left: 32rpx;
        color: #ea4b4b;
        margin-top: 40rpx;
      }

      .li_4 {
        position: absolute;
        font-size: 30rpx;
        width: 300rpx;
        height: 90rpx;
        background: #f2f2f2;
        bottom: 0;
        left: 0;
        text-align: center;
        line-height: 90rpx;
      }

      .li_5 {
        position: absolute;
        font-size: 30rpx;
        width: 300rpx;
        height: 90rpx;
        background: #64b6a8;
        bottom: 0;
        right: 0;
        text-align: center;
        line-height: 90rpx;
        color: #fff;
      }
    }

    .shangjia {
      position: absolute;
      width: 600rpx;
      height: 300rpx;
      background-color: #fff;
      border-radius: 10rpx;
      top: 30%;
      left: 50%;
      transform: translateX(-50%);

      .li_1 {
        width: 100%;
        font-size: 34rpx;
        font-weight: 600;
        margin-left: 114rpx;
        margin-top: 80rpx;
      }

      .li_2 {
        display: inline-block;
        vertical-align: top;
        width: 160rpx;
        height: 60rpx;
        background: #ffffff;
        border: 2rpx solid #64b6a8;
        border-radius: 37rpx;
        text-align: center;
        line-height: 60rpx;
        color: #64b6a8;
        margin-top: 58rpx;
        margin-left: 118rpx;
      }

      .li_3 {
        display: inline-block;
        vertical-align: top;
        width: 160rpx;
        height: 60rpx;
        background: #64b6a8;
        border-radius: 37rpx;
        text-align: center;
        line-height: 60rpx;
        color: #fff;
        margin-top: 58rpx;
        margin-left: 46rpx;
      }
    }
  }

  .box {
    width: 100%;
    // padding-bottom: 130rpx;
    background-color: #fff;
  }

  .tou {
    position: relative;
    width: 100%;
    // height: 88rpx;
    text-align: center;
    line-height: 88rpx;
    font-size: 36rpx;
    color: #fff;
    background-color: #64b6a8;
    .image1 {
      position: absolute;
      width: 32rpx;
      height: 32rpx;
      // top: 116rpx;
      left: 30rpx;
    }

    .image2 {
      position: absolute;
      width: 56rpx;
      height: 56rpx;
      // top: 104rpx;
      right: 30rpx;
    }

    p {
      position: absolute;
      // top: 104rpx;
      line-height: 45rpx;
      bottom: 21rpx;
      right: 30rpx;
      font-size: 32rpx;
      color: #fff;
    }
  }

  .bot {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 120rpx;
    background-color: #fff;
    z-index: 9;
    view {
      display: inline-block;
      position: absolute;
    }

    .bot_1 {
      left: 42rpx;
      top: 38rpx;
    }

    .bot_2 {
      left: 196rpx;
      top: 38rpx;
    }

    .bot_3 {
      width: 200rpx;
      height: 70rpx;
      background: #ffffff;
      border: 2rpx solid #64b6a8;
      color: #64b6a8;
      line-height: 68rpx;
      left: 304rpx;
      top: 25rpx;
      text-indent: 56rpx;
      border-radius: 36rpx;

      picker {
        height: 100%;
        width: 100%;

        .picker {
          left: 0;
          height: 100%;
          width: 100%;
          text-align: left;
          display: flex;
          position: relative;
          justify-content: center;
          text-indent: 0px;
        }
      }
    }

    .bot_3::before {
      position: absolute;
      top: 28rpx;
      right: 20rpx;
      content: "";
      border-color: #fff #fff #64b6a8 #fff;
      border-style: solid;
      border-width: 0rpx 8rpx 14rpx 8rpx;
      height: 0;
      width: 0;
    }

    .bot_4 {
      width: 190rpx;
      height: 70rpx;
      background: #64b6a8;
      color: #ffffff;
      line-height: 68rpx;
      left: 520rpx;
      top: 25rpx;
      text-indent: 56rpx;
      border-radius: 36rpx;

      picker {
        height: 100%;
        width: 100%;

        .picker {
          height: 100%;
          width: 100%;
          left: 0;
          text-align: left;
          display: flex;
          position: relative;
          justify-content: center;
          text-indent: 0px;
        }
      }
    }

    .bot_4::before {
      position: absolute;
      top: 28rpx;
      right: 20rpx;
      // content: "";
      border-color: #64b6a8 #64b6a8 #fff #64b6a8;
      border-style: solid;
      border-width: 0rpx 8rpx 14rpx 8rpx;
      height: 0;
      width: 0;
    }
  }

  .list {
    // margin-top: 30rpx;
	padding-top: 30rpx;
    margin-left: 30rpx;
    width: 720rpx;

    .tit {
      color: #333333;
      font-size: 36rpx;
      margin-bottom: 12rpx;
    }

    .li {
      position: relative;
      width: 96%;
      padding-bottom: 18rpx;
      margin-bottom: 34rpx;

      .xian {
        position: absolute;
        height: 2rpx;
        background-color: #e0e0e0;
        bottom: 0;
        right: 0;
      }

      .biaoqian1 {
        position: absolute;
        width: 100rpx;
        height: 46rpx;
        font-size: 24rpx;
        font-weight: 600;
        line-height: 46rpx;
        color: #ffffff;
        z-index: 9;
        top: 0;
        text-align: center;
        background: #64b6a8;
        border-radius: 0px 0px 20rpx 0px;
      }

      .biaoqian2 {
        position: absolute;
        width: 100rpx;
        height: 46rpx;
        font-size: 24rpx;
        font-weight: 600;
        line-height: 46rpx;
        color: #ffffff;
        z-index: 9;
        top: 0;
        text-align: center;
        background: #999999;
        border-radius: 0px 0px 20rpx 0px;
      }

      .img1 {
        width: 300rpx;
        height: 200rpx;
		border-radius: 20rpx;
      }

      .img2 {
        position: absolute;
        width: 300rpx;
        height: 200rpx;
      }

      .img3 {
        position: absolute;
        width: 300rpx;
        height: 200rpx;
      }

      .li_1 {
        position: relative;
        display: inline-block;
        vertical-align: top;
        margin-left: 24rpx;

        .tit {
        	width: 100%;
        	font-size: 36rpx;
        	line-height: 44rpx;
        	font-weight: 600;
        	overflow: hidden;
        	text-overflow: ellipsis;
        	display: -webkit-box;
        	-webkit-line-clamp: 2; //想要的行数
        	-webkit-box-orient: vertical;
        	.tagLabel{
        		vertical-align:top;
        		background: #64B6A8;
        		color: #fff;
        		font-size: 24rpx;
        		// line-height: 24rpx;
        		text-align: center;
        		width: 106rpx;
        		margin-right: 10rpx;
        		padding: 4rpx 6rpx;
        		border-radius: 4rpx;
        	}
        }
		.neirong_1{
			width: 100%;
			font-size: 24rpx;
			color: #666666;
			display: flex;
			align-items: center;
			.price{
				color: red;
				font-size: 30rpx;
				font-weight: 600;
			}
			.neir_css{
				flex: 1;
				overflow: hidden;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-line-clamp: 1; //想要的行数
				-webkit-box-orient: vertical;
			}
			.neir_css:nth-child(2n){
				margin-left: 10rpx;
			}
			.neir_css:nth-child(2n-1){
				margin-right: 10rpx;
			}
		}
        .jiedao {
          width: 100%;
          height: 68rpx;
          font-size: 24rpx;
          margin-bottom: 14rpx;
          color: #666666;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-line-clamp: 2; //想要的行数
          -webkit-box-orient: vertical;
        }

        .shijian {
          bottom: 4rpx;
          font-size: 26rpx;
        }
      }
    }

    .li:last-child {
      border-bottom: 0rpx solid #e0e0e0;
    }
  }

  .view {
    position: relative;
    font-size: 26rpx;
    border: 0;
    color: #333333;
    margin-right: 0;

    image {
      position: absolute;
      width: 44rpx;
      height: 24rpx;
      top: 66rpx;
      left: 50%;
      transform: translateX(-50%);
    }
  }

  .cur {
    color: #64b6a8;
    border: 0;
    transform: scale(1.1);
  }

  /deep/uni-checkbox .uni-checkbox-input {
    background-color: rgba(0, 0, 0, 0);
    border: 2rpx solid #999;
  }

  /deep/uni-checkbox .wx-checkbox-input,
  /deep/uni-checkbox .uni-checkbox-input {
    width: 48rpx;
    height: 48rpx;
  }

  /deep/.uni-checkbox-input-checked {
    background-color: #64b6a8 !important;
    border: 2rpx solid #64b6a8 !important;
  }

  /deep/ uni-checkbox::before {
    font-size: 40rpx;
    margin-top: -14rpx;
    right: 6rpx !important;
  }

  .down {
    height: 60rpx;
    line-height: 60rpx;
    // border-top: 2rpx solid #d0d0d0;
    text-align: center;
  }

  .none {
    text-align: center;

    image {
      width: 430rpx;
      margin-bottom: 16rpx;
    }

    view {
      height: 40rpx;
      line-height: 40rpx;
      color: #666;
    }
  }
.hui {
		position: fixed;
		z-index: 100;
		right: 30rpx;
		bottom: 154rpx;
		display: flex;
		align-items: center;
		padding: 10rpx 20rpx;
		background-color: #fff;
		border-radius: 34rpx;
		font-size: 26rpx;
		box-shadow: 0px 0px 36rpx rgba(0, 0, 0, 0.16);

		image {
			width: 46rpx;
			height: 46rpx;
			margin-right: 18rpx;
		}
	}
</style>